import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:jiyun_behavior/screens/home_screen.dart';
import 'package:jiyun_behavior/utils/app_theme.dart';
import 'package:jiyun_behavior/widgets/custom_button.dart';

class BasicChartScreen extends StatelessWidget {
  const BasicChartScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('命理基本盘'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                // 用户信息卡片
                _buildUserInfoCard(context),
                const SizedBox(height: 16),
                // 五行图表
                _buildElementChart(context),
                const SizedBox(height: 16),
                // 运势统计
                _buildFortuneStats(context),
                const SizedBox(height: 16),
                // 五行分析卡片
                _buildElementAnalysisCard(context),
                const SizedBox(height: 16),
                // 性格特点卡片
                _buildPersonalityCard(context),
                const SizedBox(height: 16),
                // 事业发展卡片
                _buildCareerCard(context),
                const SizedBox(height: 24),
                // 开始提升运势按钮
                CustomButton(
                  text: '开始提升运势之旅',
                  onPressed: () {
                    Navigator.pushAndRemoveUntil(
                      context,
                      MaterialPageRoute(builder: (context) => const HomeScreen()),
                      (route) => false,
                    );
                  },
                  width: 240,
                  isFullWidth: false,
                ),
                const SizedBox(height: 12),
                // 会员提示
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Icon(
                      Icons.lock,
                      size: 12,
                      color: AppTheme.lightTextColor,
                    ),
                    const SizedBox(width: 4),
                    Text(
                      '更详细的分析需要开通会员',
                      style: TextStyle(
                        fontSize: 12,
                        color: AppTheme.lightTextColor,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 24),
              ],
            ),
          ),
        ),
      ),
      bottomNavigationBar: _buildBottomNavigationBar(),
    );
  }

  Widget _buildUserInfoCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '张先生的命理基本盘',
                  style: Theme.of(context).textTheme.titleLarge,
                ),
                const SizedBox(height: 4),
                Text(
                  '癸亥年 癸卯月 甲辰日 辰时',
                  style: TextStyle(
                    fontSize: 14,
                    color: AppTheme.subtitleColor,
                  ),
                ),
              ],
            ),
            IconButton(
              icon: const Icon(
                Icons.share,
                color: AppTheme.primaryColor,
              ),
              onPressed: () {
                // 分享功能
              },
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildElementChart(BuildContext context) {
    return SizedBox(
      height: 300,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 外圆
          Container(
            width: 240,
            height: 240,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              gradient: RadialGradient(
                colors: [
                  Colors.white,
                  AppTheme.secondaryColor.withOpacity(0.5),
                ],
              ),
              border: Border.all(
                color: AppTheme.secondaryColor,
                width: 2,
              ),
            ),
          ),
          // 连接线
          CustomPaint(
            size: const Size(240, 240),
            painter: ChartLinePainter(),
          ),
          // 中心点
          Container(
            width: 60,
            height: 60,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  blurRadius: 4,
                  offset: Offset(0, 2),
                ),
              ],
            ),
            child: const Center(
              child: Text(
                '命盘',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: AppTheme.textColor,
                ),
              ),
            ),
          ),
          // 五行元素
          _buildElementNode('金', const Color(0xFFFF6B6B), const Offset(0, -90)),
          _buildElementNode('木', const Color(0xFFFFB347), const Offset(85, -30)),
          _buildElementNode('水', const Color(0xFFA5D6A7), const Offset(55, 75)),
          _buildElementNode('火', const Color(0xFF90CAF9), const Offset(-55, 75)),
          _buildElementNode('土', const Color(0xFFCE93D8), const Offset(-85, -30)),
        ],
      ),
    );
  }

  Widget _buildElementNode(String text, Color color, Offset offset) {
    return Positioned(
      left: 120 + offset.dx,
      top: 120 + offset.dy,
      child: Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: color,
        ),
        child: Center(
          child: Text(
            text,
            style: const TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 16,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildFortuneStats(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        _buildFortuneStat('财运', '73'),
        _buildFortuneStat('事业', '85'),
        _buildFortuneStat('健康', '68'),
        _buildFortuneStat('人际', '79'),
      ],
    );
  }

  Widget _buildFortuneStat(String label, String value) {
    return Column(
      children: [
        Text(
          value,
          style: const TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: AppTheme.primaryColor,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: AppTheme.subtitleColor,
          ),
        ),
      ],
    );
  }

  Widget _buildElementAnalysisCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '五行分析',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            RichText(
              text: TextSpan(
                style: TextStyle(
                  fontSize: 14,
                  color: AppTheme.textColor,
                  height: 1.6,
                ),
                children: [
                  const TextSpan(text: '您的八字中，'),
                  TextSpan(
                    text: '金水较旺，木火较弱',
                    style: TextStyle(
                      color: AppTheme.primaryColor,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const TextSpan(text: '，土居中。日主天干为甲木，处于被抑制状态。'),
                ],
              ),
            ),
            const SizedBox(height: 16),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                _buildTag('金: 旺', true),
                _buildTag('水: 旺', true),
                _buildTag('土: 平', false),
                _buildTag('木: 弱', false),
                _buildTag('火: 弱', false),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTag(String text, bool isHighlight) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      decoration: BoxDecoration(
        color: isHighlight ? AppTheme.secondaryColor : const Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Text(
        text,
        style: TextStyle(
          fontSize: 12,
          color: isHighlight ? AppTheme.primaryColor : AppTheme.subtitleColor,
        ),
      ),
    );
  }

  Widget _buildPersonalityCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '性格特点',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            Text(
              '您性格稳重踏实，做事有条理，善于规划。金水旺盛使您思维敏捷，善于沟通，但有时过于理性，缺乏感性思考。木火偏弱导致创造力和决断力有待提升，建议多参与创新活动，锻炼决策能力。',
              style: TextStyle(
                fontSize: 14,
                color: AppTheme.textColor,
                height: 1.8,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCareerCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '事业发展',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            Text(
              '适合从事金融、管理、咨询、教育等行业。事业运势在2023-2025年处于上升期，2023年下半年有贵人相助机会。建议稳扎稳打，不要急于求成，积累专业知识和人脉资源。',
              style: TextStyle(
                fontSize: 14,
                color: AppTheme.textColor,
                height: 1.8,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildBottomNavigationBar() {
    return BottomNavigationBar(
      currentIndex: 1,
      type: BottomNavigationBarType.fixed,
      selectedItemColor: AppTheme.primaryColor,
      unselectedItemColor: AppTheme.lightTextColor,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: '首页',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.pie_chart),
          label: '命盘',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.book),
          label: '抄经',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.compass_calibration),
          label: '指引',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: '我的',
        ),
      ],
    );
  }
}

class ChartLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black.withOpacity(0.1)
      ..strokeWidth = 1;

    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2;

    // 画五角星的连接线
    final points = [
      Offset(center.dx, center.dy - radius), // 上
      Offset(center.dx + radius * 0.95 * 0.5, center.dy - radius * 0.31), // 右上
      Offset(center.dx + radius * 0.59, center.dy + radius * 0.81), // 右下
      Offset(center.dx - radius * 0.59, center.dy + radius * 0.81), // 左下
      Offset(center.dx - radius * 0.95 * 0.5, center.dy - radius * 0.31), // 左上
    ];

    // 画五角星的线
    for (int i = 0; i < points.length; i++) {
      for (int j = i + 1; j < points.length; j++) {
        canvas.drawLine(points[i], points[j], paint);
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
} 